<template>
    <div class="app-container">
        <!--查询表单-->
        <el-form :inline="true" class="demo-form-inline">
            <el-form-item>
                <el-input v-model="sectionQuery.name" placeholder="部门名"/>
            </el-form-item>

            <el-form-item label="添加时间">
                <el-date-picker
                v-model="sectionQuery.begin"
                type="datetime"
                placeholder="选择开始时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>
            <el-form-item>
                <el-date-picker
                v-model="sectionQuery.end"
                type="datetime"
                placeholder="选择截止时间"
                value-format="yyyy-MM-dd HH:mm:ss"
                default-time="00:00:00"
                />
            </el-form-item>

            <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
            <el-button type="default" @click="resetData()">清空</el-button>
        </el-form>

        <!-- 表格 -->
        <el-table
        :data="list"
        border
        fit
        highlight-current-row>

        <el-table-column
            label="序号"
            width="70"
            align="center">
            <template slot-scope="scope">
            {{ (page - 1) * limit + scope.$index + 1 }}
            </template>
        </el-table-column>


        <el-table-column label="部门名称" width="80">
            <template slot-scope="scope">
                <!-- scope：当前的整个表格 -->
            {{ scope.row.sectionName }}
            </template>
        </el-table-column>

        <el-table-column prop="intro" label="部门信息" />

        <el-table-column prop="gmtCreate" label="添加时间" width="160"/>

        <el-table-column prop="sort" label="排序" width="60" />

        <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
                <router-link :to="'/section/edit/'+scope.row.id">
                    <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                </router-link>
                <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDataById(scope.row.id)">删除</el-button>
            </template>
        </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
        :current-page="page"
        :page-size="limit"
        :total="total"
        style="padding: 30px 0; text-align: center;"
        layout="total, prev, pager, next, jumper"
        @current-change="getList"
        />
        <!-- 方法封装好，自动传参，不需要加括号,getList(page) -->
    </div>
</template>
<script>
//引入 js 文件
import section from '@/api/manager/section'
export default {
   // data:{

   // data的两种写法，均可
    data(){return{
            list:null,//查询之后接口返回集合
            page:1,//当前页
            limit:5,//每页记录数
            total:0,//总记录数
            sectionQuery:{}//条件封装对象
        }
    },
    created(){this.getList()
    },
    methods:{getList(page = 1){ this.page = page
            section.getSectionListPage(this.page,this.limit,this.sectionQuery)
            .then(response => {
               console.log(response)
                this.list = response.data.rows
                this.total = response.data.total
            }).catch(error => {
                console.log(error)
            })},
        resetData(){
            this.sectionQuery = {}
            this.getList()
        },
        removeDataById(id){
            this.$confirm('此操作将永久删除该信息, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
               section.deleteSectionId(id)
                    .then(response => {
                       this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                       this.getList()
                    })
                    .catch()
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
            });
            });
        },
    }
}
</script>
